JavaScript and Frames

Browser Compatibility: NS2.02+, IE4+

JavaScript and Frames. Frames and JavaScript. Sounds like a mess doesn't it? Well, it does make things a bit more complicated. Let's see if we can figure out how to get those frames to work with our scripts.

The first thing you will want to know is "How in the land of JavaScript do I access javascript variables and other things in one frame from another frame? The answer is to use a trick like this:

parent.framename.attributes_to_change

Replacing framename with the name you gave the frame in your frameset, ie:

In this case, you would access something in that frame with:

parent.right_frame.attributes_to_change

Let's start by changing the value of a text box in a frame on the right from a frame on the left side. First, set up a little frameset. This will require 3 separate html pages. Your frameset, and the html for your 2 frames. Let's begin with the frameset:

<HTML>
<HEAD>
<TITLE>Frames Values</TITLE>
</HEAD>
<FRAMESET cols="20%,80%">
<FRAME SRC="jex13.htm" name="left_frame">
<FRAME SRC="jex14.htm" name="right_frame">
</FRAMESET>
</HTML>

The two pages I will use inside the frameset are "jex13.htm" and "jex14.htm". The left side (jex13.htm) will have this html code:

<HTML>
<HEAD>
<TITLE>JavaScript Example 13</TITLE>
</HEAD>
<BODY>
<FORM>
<INPUT type="button" value="What is cool?" 
   onClick="parent.right_frame.document.form1.text1.value='Me!'">
</FORM>
</BODY>
</HTML>

This is where we use our new command, inside the onClick=" " command:

onClick="parent.right_frame.document.form1.text1.value='Me!'"

As you can see, we access the right frame with the "parent.right_frame." and then we add what we want to change onto the end. Since we want to change something inside the document object, we have to use "parent.right_frame.document.". If you leave out the "document" the browser defaults to using the "window" object, which we will use later on. But for now, we want the "document" object. Now, to access the form, we tack on the name of the form, "parent.right_frame.document.form1.". Then, we access the textbox by adding the name of the textbox onto it: "parent.right_frame.document.form1.text1.". Finally, we can access the value attribute of the textbox by placing value at the end, and assigning it a value with the eqaul sign:

"parent.right_frame.document.form1.text1.value='Me!'"

So, we now have a button that will change a textbox in the right_frame. The html code for the right frame (jex14.htm) is simply a form with an empty textbox:

<HTML>
<HEAD>
<TITLE>JavaScript Example 14</TITLE>
</HEAD>
<BODY>
<FORM name="form1">
<INPUT type="text" name="text1" size="25" value="">
</FORM>
</BODY>
</HTML>

Now, you can see an exaple of our....well...master frames script:

Sample

Well, if you liked that trick, let's see an even better one. Let's move on to: Changing 2 Frames at Once with JavaScript.